import React, { Component } from 'react'
import { Layout, Menu, Modal,message } from 'antd'
import {
  MenuUnfoldOutlined,
  MenuFoldOutlined,
  UserOutlined,
  VideoCameraOutlined,
  UploadOutlined,
  ExclamationCircleOutlined
} from '@ant-design/icons'
import '../assets/css/dashboard.css'
import Adminrouter from '../router/AdminRouter'
import req from '../http/req'
import url from '../config/url'
const { Header, Sider, Content } = Layout

class Dashboard extends Component {
  state = {
    collapsed: false,
    info: {
      // 需要给深层次的数据默认值，防止Ajax异步请求的时差而导致的报错
      last_login_addr: {}
    }
  }

  toggle = () => {
    this.setState({
      collapsed: !this.state.collapsed
    })
  }
  render() {
    return (
      <Layout id="Box">
        <Sider trigger={null} collapsible collapsed={this.state.collapsed}>
          <div className="logo" />
          <Menu theme="dark" mode="inline" defaultSelectedKeys={['1']}>
            <Menu.Item key="1" icon={<UserOutlined />}>
              nav 1
            </Menu.Item>
            <Menu.Item key="2" icon={<VideoCameraOutlined />}>
              nav 2
            </Menu.Item>
            <Menu.Item key="3" icon={<UploadOutlined />}>
              nav 3
            </Menu.Item>
          </Menu>
        </Sider>
        <Layout className="site-layout">
          <Header className="site-layout-background" style={{ padding: 0 }}>
            {React.createElement(
              this.state.collapsed ? MenuUnfoldOutlined : MenuFoldOutlined,
              {
                className: 'trigger',
                onClick: this.toggle
              }
            )}
            欢迎可爱的{this.state.info.username}进入后台，上次登录的地点是
            {this.state.info.last_login_addr.state} /{' '}
            {this.state.info.last_login_addr.isp}（IP：{this.state.info.last_ip}
            ）登录！
            [ <span
              onClick={this.layout}
              style={{ color: 'blue', cursor: 'pointer' }}
            >
              退出 
            </span>]
          </Header>
          <Content
            className="site-layout-background"
            style={{
              margin: '24px 16px',
              padding: 24,
              minHeight: 280
            }}
          >
            Content
               {/* 嵌套路由，用于显示后台的所有的组件 */}
            <Adminrouter />
          </Content>
        </Layout>
      </Layout>
    )
  }
  componentDidMount() {
    req.get(url.GetInfo).then((res) => {
      if (res.data.errNo === 0) {
        this.setState({
          info: res.data.accountInfo
        })
      }
    })
  }
  layout = () => {
    Modal.confirm({
      icon: <ExclamationCircleOutlined />,
      content: '确定要退出吗？',
      okText: '确认',
      cancelText: '取消',
      onOk: () => {
        // 清理session会话
        sessionStorage.removeItem('jwt')
        sessionStorage.removeItem('acl')
        message.success('注销成功...', 2, () => {
          this.props.history.push('/login')
        })
      }
    })
  }
}

export default Dashboard
